<template>
    <div class="entry">
        <div @click="toDetail(obj.id)">
            <div class="user">
                <div class="img-box"></div>
                <p>{{obj.writer}}</p>
            </div>
            <p class="title">{{obj.title}}</p>
            <div class="info">
                <span class="time">{{obj.time}}</span>
                <span class="browse">{{obj.browse}}次浏览</span>
            </div>
            <div class="content">
                <p v-for="item in conArr">{{item}}</p>
                <p class="more" v-show="conCount>2?true:false" @click="toDetail(obj.id)">查看更多</p>
            </div>
            <!-- 图片 -->
            <div class="img-li">
                <div class="img-box" v-for="item in obj.imgArr" :key="item.id">
                    <img :src="item.urlStr" alt="">
                </div>
            </div>
        </div>
        <div class="entry-bot">
            <div>
                <svg t="1636593252379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3104" width="200" height="200"><path d="M880 640v144c0 35.2-28.8 64-64 64H208c-35.2 0-64-28.8-64-64V240c0-35.2 28.8-64 64-64h208c17.6 0 32-14.4 32-32s-14.4-32-32-32H208c-70.4 0-128 57.6-128 128v544c0 70.4 57.6 128 128 128h608c70.4 0 128-57.6 128-128v-144c0-17.6-14.4-32-32-32s-32 14.4-32 32z" fill="#707070" p-id="3105"></path><path d="M835.2 176H624c-17.6 0-32-14.4-32-32s14.4-32 32-32h288c9.6 0 17.6 3.2 22.4 9.6 6.4 4.8 9.6 12.8 9.6 22.4v288c0 17.6-14.4 32-32 32s-32-14.4-32-32V220.8L403.2 699.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L835.2 176z" fill="#707070" p-id="3106"></path></svg>
            </div>
            <div @click="addCollectArr(obj)" :class="obj.isCollected?'active':''">
                <svg t="1636593291236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4021" width="200" height="200"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="4022" fill="#707070"></path></svg>
                <span>{{obj.collectCount}}</span>
            </div>
            <div @click="toDetail(obj.id)">
                <svg t="1636593345836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4934" width="200" height="200"><path d="M896 51.2H128C57.344 51.2 0 108.544 0 179.2v460.8c0 70.656 57.344 128 128 128h102.4v210.944L464.896 768H896c70.656 0 128-57.344 128-128V179.2c0-70.656-57.344-128-128-128z m76.8 588.8c0 42.496-34.304 76.8-76.8 76.8H445.44l-56.832 51.2L281.6 864.256V716.8H128c-42.496 0-76.8-34.304-76.8-76.8V179.2c0-42.496 34.304-76.8 76.8-76.8h768c42.496 0 76.8 34.304 76.8 76.8v460.8z" p-id="4935" fill="#707070"></path><path d="M256 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4936" fill="#707070"></path><path d="M512 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4937" fill="#707070"></path><path d="M768 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4938" fill="#707070"></path></svg>
                <span>{{obj.commentCount}}</span>
            </div>
            <div @click="addLikeArr(obj)" :class="obj.isLiked?'active':''">
                <svg t="1636593386275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5866" width="200" height="200"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="5867" fill="#707070"></path></svg>
                <span>{{obj.likeCount}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
export default {
    name:"Entry",
    props:{
        obj:{
            type:Object
        },
    },
    methods:{
        ...mapMutations(["addLikes","removeLikes","addCollects","removeCollects"]),
        // collect(){
        //     if(this.userToken ==null){
        //         this.$router.push({path:"/login"})
        //     }
        // },
        addLikeArr(obj){
            if(!obj.isLiked){
                // 添加到“我喜欢”的数组
                this.addLikes(obj);
            }else{
                this.removeLikes(obj.id);
            }
            let res ={
                id:obj.id,
                likeState:!obj.isLiked
            }
            this.$store.commit("entry/setLikeState",res);
        },
        addCollectArr(obj){
            if(this.userToken ==null){
                this.$router.push({path:"/login"});
                return;
            }
            if(!obj.isCollected){
                // 添加到“我喜欢”的数组
                this.addCollects(obj);
            }else{
                this.removeCollects(obj.id);
            }
            let res ={
                id:obj.id,
                collectState:!obj.isCollected
            }
            this.$store.commit("entry/setCollectState",res);
        },
        toDetail(id){
            this.$router.push({path:`/detailEntry/id/${id}/${new Date().getTime()}`});
        }
    },
    computed:{
        ...mapState(["userToken","likes","collects","entry"]),
        conArr(){
            return this.obj.content.slice(0,2)
        },
        conCount(){
            return this.obj.content.length;
        }
    },
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.entry{
    background-color: #fff;
    padding: 20px 15px;
    box-sizing: border-box;
    margin-top: 10px;
    .user{
        display: flex;
        align-items: center;
        .img-box{
            width: 30px;
            height: 30px;
            background-color: #777;
            border-radius: 50%;
            margin-right: 10px;
        }
        p{
            font-size: 14px;
        }
    }
    .title{
        font-size: 17px;
        font-weight: bold;
        position: relative;
        padding-left: 18px;
        margin: 15px 0 0 0;
        &::after{
            content: "";
            width: 6px;
            height: 18px;
            background-color: $mainCol;
            position: absolute;
            top: 3px;
            left: 0;
        }
    }
    .info{
        height: 30px;
        line-height: 30px;
        span{
            font-size: 12px;
            color: #999;
        }
        .time{
            margin-right: 15px;
        }
    }
    .content{
        margin-top: 10px;
        p{
            font-size: 14px;
            color: #666;
            line-height: 25px;
        }
        p:nth-child(2){
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        .more{
            color: $moreCol;
            font-weight: bold;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
    }
    .img-li{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-items: flex-start;
        padding: 0 5px;
        box-sizing: border-box;
        .img-box{
            width: 105px;
            height: 105px;
            flex-shrink:0 ;
            display: flex;
            align-items: center;
            position: relative;
            margin: 2px 2px;
            img{
                width: 100%;
            }
        }
    }
    .entry-bot{
        margin-top: 10px;
        display: flex;
        align-content: center;
        >div{
            flex-grow: 1;
            text-align: center;
            .icon{
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 3px;
                vertical-align: middle;
            }
            span{
                font-size: 13px;
                vertical-align: middle;
            }
            &.active{
                .icon{
                    path{
                        fill: $mainCol;
                    }
                }
            }
        }
    }
}
</style>